<template>
    <div class="data-source-container">
      <!-- <div class="header">
        <h1>数据源管理</h1>
        <div class="actions">
          <el-button type="primary" @click="showAddDialog">添加数据源</el-button>
          <el-button @click="refreshData">刷新</el-button>
        </div>
      </div> -->
  
      <div class="filter-bar">
        <!-- <el-input
          v-model="searchQuery"
          placeholder="搜索数据源名称或类型"
          clearable
          style="width: 300px"
          @clear="handleSearchClear"
          @keyup.enter="handleSearch"
        >
          <template #append>
            <el-button :icon="Search" @click="handleSearch" />
          </template>
        </el-input>
        <el-select
          v-model="filterType"
          placeholder="按类型筛选"
          clearable
          style="width: 200px; margin-left: 10px"
        >
          <el-option
            v-for="type in dataSourceTypes"
            :key="type.value"
            :label="type.label"
            :value="type.value"
          />
        </el-select>
        <el-select
          v-model="filterStatus"
          placeholder="按状态筛选"
          clearable
          style="width: 200px; margin-left: 10px"
        >
          <el-option
            v-for="status in statusOptions"
            :key="status.value"
            :label="status.label"
            :value="status.value"
          />
        </el-select> -->
      </div>
  
      <!-- border
        stripe -->
      <el-table
        :data="dataSources"
        style="width: 100%"
        v-loading="loading">
        <el-table-column align="center" prop="dataSourceName" label="数据源名称"/>
        <el-table-column align="center" prop="dataSourceType" label="数据源类型">
          <template #default="{ row }">
            <el-tag :type="getTypeTagType(row.dataSourceType)">{{ row.dataSourceType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="databaseUser" label="数据库连接用户"/>
        <el-table-column align="center" prop="databaseName" label="数据库名"/>
        <el-table-column align="center" prop="ip" label="IP"/>
        <el-table-column align="center" prop="port" label="端口">
          <template #default="{ row }">
            <el-tag :type="getTypeTagType(row.port)">{{ row.port }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
  
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import {
    listPage
  } from "@/api/tempcfg/datasource/datasources";


  
  const loading = ref(false);
  const dataSources = ref([]);
  const searchQuery = ref("");
  const filterType = ref("");
  const filterStatus = ref("");
  const currentPage = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const dialogVisible = ref(false);
  const isEdit = ref(false);
  const formRef = ref(null);
  
  const form = ref({
    id: "",
    name: "",
    type: "",
    url: "",
    username: "",
    password: "",
    description: "",
  });
  
  
  // 获取类型对应的标签样式
  const getTypeTagType = (type) => {
    const typeMap = {
      MySQL: "",
      POSTGRESQL: "success",
      ORACLE: "warning",
      "SQL Server": "danger",
      MongoDB: "info",
      Redis: "danger",
      Elasticsearch: "warning",
      Snowflake: "info",
      S3: "success",
      HDFS: "",
    };
    return typeMap[type] || "primary";
  };
  
  // 加载数据
  const loadData = () => {
    loading.value = true;
    let query = {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
    };
    listPage(query).then((res) => {
      dataSources.value = res.rows;
      total.value = dataSources.value.length;
      loading.value = false;
    });
  };
  
  // 搜索处理
  const handleSearch = () => {
    currentPage.value = 1;
  };
  
  const handleSearchClear = () => {
    currentPage.value = 1;
  };
  
  // 分页处理
  const handleSizeChange = (val) => {
    pageSize.value = val;
    currentPage.value = 1;
  };
  
  const handleCurrentChange = (val) => {
    currentPage.value = val;
  };
  
  // 显示添加对话框
  const showAddDialog = () => {
    isEdit.value = false;
    form.value = {
      id: "",
      name: "",
      type: "",
      url: "",
      username: "",
      password: "",
      description: "",
    };
    dialogVisible.value = true;
  };
  
  // 编辑处理
  const handleEdit = (row) => {
    isEdit.value = true;
    form.value = { ...row, password: "" };
    dialogVisible.value = true;
  };
  
  // 删除处理
  const handleDelete = (row) => {
    ElMessageBox.confirm(`确定要删除数据源 "${row.name}" 吗?`, "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // 模拟删除
        dataSources.value = dataSources.value.filter((item) => item.id !== row.id);
        ElMessage.success("删除成功");
      })
      .catch(() => {});
  };
  
  onMounted(() => {
    loadData();
  });
  </script>
  
  <style scoped>
  .data-source-container {
    padding: 20px;
    /* background-color: #f5f7fa; */
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .filter-bar {
    margin-bottom: 20px;
  }
  
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  
  .el-tag {
    margin-right: 5px;
  }
  </style>